
import './less/App.less';
import Pbutton from './page/Pbutton'
import Pmodal from './page/Pmodal'
import Ptips from './page/Ptips'
import Ploading from './page/Ploading'
import Plist from './page/Plist'
import Pcard from './page/Pcard'
import Pform from './page/Pform'
import Predux from './page/Predux';
import Pslide from './page/Pslide';
import Pprocess from './page/Pprocess';
import Paudio from './page/Paudio';
import Pvideo from './page/Pvideo'
import NotFound from './page/NotFound'
import PtoolTips from './page/PtoolTips';
import Ptabs from './page/Ptabs';
import { HashRouter, Route, Switch, Redirect } from 'react-router-dom'
import { useState } from 'react'
import {Nav, Store, Redux} from './dComponent'
import Ptable from './page/Ptable';
import PcontextMenu from './page/PcontextMenu';
import PfloatBtn from './page/PfloatBtn';
import PColorPicker from './page/PColorPicker';
import Ppicker from './page/Ppicker';
// import { Button } from './bundle.min'
// import Rmd from './page-readme/Rmd'
function App() {
  let [navList] = useState([
    {label:'Button-按钮',path:'/page_button', children:[
      {label:'按钮', path:'/page_button'},
      {label:'悬浮按钮', path:'page_fbtn'}
    ]},
    {label:'Modal-弹窗',path:'/page_modal'},
    {label:'Toast-提示',path:'/page_toast'},
    {label:'Loading-加载动画',path:'/page_loading'},
    {label:'Card-卡片',path:'/page_card'},
    {label:'Slide-轮播图',path:'/page_slide'},
    {label:'List-列表',path:'/page_list'},
    {label:'Process-进度条',path:'/page_process'},
    {label:'Form-表单',path:'/page_form'},
    {label:'Redux-全局状态',path:'/page_redux'},
    {label:'Video-视频',path:'/page_video'},
    {label:'Audio-音频',path:'/page_audio'},
    {label:'Table-表格',path:'/page_table'},
    {label:'Tabs-标签栏',path:'/page_tabs'},
    {label:'ContextMenu-菜单',path:'/page_contextMenu'},
    {label:'ToolTips-文本提示',path:'/page_toolTips'},
    {label:'ColorPicker-颜色选择器',path:'/page_colorPicker'},
    {label:'Picker-时间类选择器',path:'/page_picker'},
    {label:'待定',path:'/page_19'},
    {label:'待定',path:'/page_20'},
    {label:'待定',path:'/page_15',children:[
      {label:'待定1',path:'/page_15'},
      {label:'待定2',path:'/page_15'},
      {label:'待定3',path:'/page_15'},
      {label:'待定4',path:'/page_15'},
      {label:'待定5',path:'/page_15'},
      {label:'待定6',path:'/page_15'},
    ]},
  ])

  return (
    <Redux
      name="app"
      store={Store}
    >
    <div className="App">
      <HashRouter>
        <Nav 
          navList={navList}
          title={'组件库'}
          showSwitch={true}
        />
      <div className={`body`}>
        <Switch>
          <Route path='/page_button' exact component={Pbutton}/>
          <Route path='/page_modal' exact component={Pmodal}/>
          <Route path='/page_toast' exact component={Ptips}/>
          <Route path='/page_loading' exact component={Ploading}/>
          <Route path='/page_list' exact component={Plist}/>
          <Route path='/page_card' exact component={Pcard}/>
          <Route path='/page_form' exact component={Pform}/>
          <Route path='/page_redux' exact component={Predux}/>
          <Route path='/page_slide' exact component={Pslide}/>
          <Route path='/page_process' exact component={Pprocess}/>
          <Route path='/page_audio' exact component={Paudio}/>
          <Route path='/page_video' exact component={Pvideo}/>
          <Route path='/page_table' exact component={Ptable}/>
          <Route path='/page_contextMenu' exact component={PcontextMenu}/>
          <Route path='/page_toolTips' exact component={PtoolTips}/>
          <Route path='/page_tabs' exact component={Ptabs}/>
          <Route path='/page_fbtn' exact component={PfloatBtn}/>
          <Route path='/page_colorPicker' exact component={PColorPicker}/>
          <Route path='/page_picker' exact component={Ppicker}/>
          <Route path='/page_404' exact component={NotFound}/>
          <Redirect to='/page_404'/>
        </Switch>
      </div>
        </HashRouter>
    </div>
    {/* <Button>123</Button> */}
    </Redux>
  );
}

export default App;
